<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>船舶管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" :style="'margin-top:0px;'">
        <a-form-model-item label="船名">
          <a-input v-model="form.nameLike" />
        </a-form-model-item>
        <a-form-model-item label="船APP账号">
          <a-input v-model="form.accountLike" />
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-select v-model="form.status" :style="'width: 120px;'">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="0">冻结</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="类型">
          <a-select v-model="form.isSelfOperation" :style="'width: 120px;'">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="1">自营</a-select-option>
            <a-select-option value="0">租赁</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="shipCheck">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="shipPlus">+ 创建船舶</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        :style="'margin-top: 25px;'"
        :pagination="pagination"
        :row-key="(record) => record.id"
      >
        <span slot="status" slot-scope="record" :style="'display: flex; align-items: center;'">
          <template v-if="record.status">
            <span class="green"></span>
            <span>正常</span>
          </template>
          <template v-else>
            <span class="red"></span>
            <span>冻结</span>
          </template>
        </span>
        <a slot="do" slot-scope="record" @click="detail(record)">详情</a>
      </a-table>
    </div>
  </div>
</template>
<script>
import { queryShipInfoList } from '@/api/shipCenter'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    dataIndex: 'name'
  },
  {
    title: '船东',
    dataIndex: 'ownerName',
    width: 200
  },
  {
    title: '类型',
    customRender: (text, record, index) => {
      return record.isSelfOperation ? '自营' : '租赁'
    }
  },
  {
    title: '装载量',
    dataIndex: 'loadingCapacity',
    ellipsis: true
  },
  {
    title: '告警油量（吨）',
    dataIndex: 'alarmOilQuantity'
  },
  {
    title: '船长姓名',
    dataIndex: 'captainName',
    ellipsis: true
  },
  {
    title: '船APP账号',
    dataIndex: 'phone',
    ellipsis: true
  },
  {
    title: '状态',
    key: 'stauts',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '操作',
    key: 'do',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
export default {
  name: 'shipManagement',
  data () {
    return {
      form: {
        nameLike: '',
        accountLike: '',
        status: '',
        isSelfOperation: ''
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      btnControl: {}
    }
  },
  methods: {
    shipCheck () {
      this.pageNum = 1
      let paramData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.form
      }
      // // console.log(paramData)
      this.queryShip(paramData)
    },
    shipPlus () {
      if (!this.btnControl.create) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push({ path: 'shipManagement/create' })
    },
    queryShip (paramData) {
      this.loading = true
      queryShipInfoList(paramData)
        .then((res) => {
          // // console.log(res)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: (total) =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: (pageNum) => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.queryShip(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.queryShip(paramData)
            }
          }
          this.loading = false
        })
        .catch((rs) => {})
    },
    detail (e) {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push(`shipManagement/detail/${e.id}`)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.queryShip({
      pageSize: this.pageSize,
      pageNum: this.pageNum
    })
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
  .green {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00a854;
    margin-right: 5px;
  }
  .red {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f04134;
    margin-right: 5px;
  }
}
</style>
